Please ask about problems and questions regarding this tutorial on answers.ros.org. Don't forget to include in your question the link to this page, the versions of your OS & ROS, and also add appropriate tags.

Web App Basics

The easiest way to add functionality to the WebUI is to create a plugin for the WebUI called an App. These apps can be as simple just a button to launch a launch file (for example, the tuck arms application) or as complex as having realtime interactive updating from the roscore on the robot (the navigation application). Furthermore, the web apps can be dynamically added to your website by just adding its package to the ROS_PACKAGE_PATH.

This tutorial will walk you through making the most basic web app, a talker listener. It will use the standard python talker and display the chatter in the WebUI app.

First, grab an svn copy of this app:

 svn co `roslocate svn sample_application`

App File Structure

In order for the WebUI to find and use your application, it must have a specific structure. First, manifest file must declare a dependency on "webui". This is used to find the app within the package file.

Next, your application must have an app file with the .app extension. Create sample_application.app and copy the below into this file.

name: Sample App
package: sample_application
launch_file: sample_application/talker_listener.launch
description: A sample ROS app to show the structure of an complete application.  It shows how to build a webui and register a plugin.
icon: images/screenshot.png
provides: sample
depends:

This file declares basic information about the Web app used to generate a standard info page, find the launch file, and control web app runtime dependencies. Most of these entries are self explanatory. Name is the app name as it is to be displayed in the GUI. The launch file specifies the location of the launch file to be triggered. This path must be package_name/launch_file_package_path. The icon entry gives the path to the icon used to represent the app. This path is specified from the src/sample_application folder.